<template>
    <div>
        <div class="img_box">
            <img src="@/assets/gift1_2.png" id="img1">
            <img src="@/assets/pic_erweima.png" id="img2">
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
           
        }
    },
    created(){
    },
    methods:{
        showCode(){
            
        },
    }
}
</script>
<style>
* {
      margin: 0;
      padding: 0;
    }
 
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      perspective: 1000px;
      /* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */
    }
 
    .img_box {
      width: 400px;
      height: 400px;
      padding-top: 140px;
      position: relative;
      transform-style: preserve-3d;
      margin: 100px auto;
      /* 开启三维空间 */
    }
 
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      border-radius: 20px;
      box-shadow: 0 0 15px rgba(0, 0, 0);
      backface-visibility: hidden;
      /* 该句代码的意思就是当你是背面面向的时候，就会隐藏图片，我们设置的180°旋转就是让他隐藏了 */
      transition: 3s all;
    }
 
    #img2 {
      transform: rotateY(180deg);
    }
 
    body:hover #img2 {
      transform: rotateY(0deg);
    }
 
    body:hover #img1 {
      transform: rotateY(-180deg);
    }
</style>